<template>
  <el-container class="height100">
    <el-main class="el-mainContent height100 overflowYHidden  setting paddingB0"  direction="vertical"  ref="managerMain">
      <div class="content height100 ">
        <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo setHeader marginBot0"  ref="normalHeight">
          <!-- <i class="el-icon-menu title-icon"></i> -->
          <p class="el-divider-header">{{$t('fieldextend')}}</p>
        <!-- <el-col :span="8" class="align-right normalLineH"> -->
          <!-- <el-button type="primary" @click="onCreateBtnClick" size="small">{{$t('new')}}</el-button>
          <el-button @click="onDeleteBtnClick" size="small" plain>{{$t('del')}}</el-button> -->
        <!-- </el-col> -->
      </el-row>

      <!-- 字段扩展查询 -->
      <el-row  ref="search">
        <el-col>
          <el-form :inline="true" :model="searchdata" class="form-inline searchForm" size="mini" >
            <el-form-item :label="$t('type')">
              <el-select v-model="searchdata.data.type" class="el-select-w">
                <el-option :label="$t('placeholder_select')" value=""></el-option>
                <el-option :label="$t('string')" value="string"></el-option>
                <el-option :label="$t('clob')" value="clob"></el-option>
                <el-option :label="$t('date')" value="date"></el-option>
                <el-option :label="$t('upload')" value="upload"></el-option>
                <el-option :label="$t('radio')" value="radio"></el-option>
                <el-option :label="$t('checkbox')" value="checkbox"></el-option>
                <el-option :label="$t('select')" value="select"></el-option>
                <el-option :label="$t('address')" value="address"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('owned_module')">
              <el-select v-model="searchdata.data.fortable"  class="el-select-w">
                <el-option :label="$t('placeholder_select')" value=""></el-option>
                <el-option :label="$t('tableUser')" value="tableUser"></el-option>
                <el-option :label="$t('tableDept')" value="tableDept"></el-option>
                <el-option :label="$t('tableDomain')" value="tableDomain"></el-option>
              </el-select>  
            </el-form-item>
            <el-form-item>
              <el-button @click="searchTableData" type="primary" plain>{{$t('query')}}</el-button>
              <el-button @click="resetTableData">{{$t('reset')}}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 字段扩展列表 -->
      <el-table :data="fieldextends.datas"
        stripe
        @row-click="onRowClick"
        ref="multipleTable"
        :row-key="handleReserve" 
        @selection-change="handleSelectionChange"
        header-cell-class-name="tableHeaderbg"
        class="Trpointer overflowYScroll"
        size="small"
        :height="tableListConHeight">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column prop="name" :label="$t('owned_field')" ></el-table-column>
        <el-table-column prop="label" :label="$t('show_label')"></el-table-column>
        <el-table-column :label="$t('type')">
          <template slot-scope="scope">
            {{scope.row.type == "string" ? $t('string') : 
            scope.row.type == "date" ? $t('date') : 
            scope.row.type == "radio" ? $t('radio') : 
            scope.row.type == "checkbox" ? $t('checkbox') : 
            scope.row.type == "select" ? $t('select') : 
            scope.row.type == "upload" ? $t('upload') :
            scope.row.type == "address" ? $t('address') : 
            $t('clob')}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('show_list')">
          <template slot-scope="scope">{{scope.row.enabel? $t('show') : $t('not_show')}}</template>
        </el-table-column>
        <el-table-column  :label="$t('owned_module')">
          <template slot-scope="scope">{{scope.row.forTable == "tableUser"? $t('tableUser') : scope.row.forTable == "tableDept"? $t('tableDept') :  $t('tableDomain')}}</template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="searchTableData"
          :current-page.sync="searchdata.currpage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchdata.pagelines"
          :page-count="4"
          layout="prev, pager, next, total, sizes"
          background
          :total="fieldextends.rowCount?fieldextends.rowCount:0"
          ref="pagination"
        ></el-pagination>
      </div>
    </el-main>
    <!-- 编辑的时候出现 -->
    <dialog_item :dialogTitle="dialogTitle" @onBtnDialogClick="onBtnDialogClick" :visible.sync="detailVisible">
      <fieldextend_detail 
          ref="editDetail"  
          :detail="content" 
          v-if="detailVisible"
          :mode="mode"
          type="system"
          @refresh="refresh"
        />
    </dialog_item>
  </el-container>
</template>

<script>
import fieldextend_detail from "@/components/fieldextend_detail.vue";
import { pxToRemScale } from '../utils'
import {delMsg} from '../utils/elementui'
export default {
  components: { fieldextend_detail },
  data() {
    return {
      fieldextends: [],
      content: {},
      searchdata:{
        currpage:1,
        pagelines:10,
        data:{
          type:"",
          fortable:"",
          domainid: this.$route.query.domainid,
          belong:"All"
        }
      },
      multipleTable:[],
      multipleSelection:[],
      mode:"detail",
      tableListConHeight:null,
      detailVisible: false,
      dialogTitle: '',
    };
  },
  props:["SystemFile"],
  watch:{
    detail(newVal){
      this.detail=newVal;
    }
  },

  created() {
    this.searchTableData();
  },
  mounted(){
    let temp=pxToRemScale(this.$refs.normalHeight.$el.getClientRects()[0].height+this.$refs.search.$el.getClientRects()[0].height+this.$refs.pagination.$el.getClientRects()[0].height)
    this.tableListConHeight=`calc(100% - ${temp}rem)`;
  },
  methods: {
    onBtnDialogClick(name){
      if(name=='save'){
        this.onSaveBtnClick()
      }
    },
    onSaveBtnClick(){
      this.$refs.editDetail.onSaveBtnClick('fieldForm')
    },
    refresh(){
      this.detailVisible = false;
      this.searchTableData();
      this.$forceUpdate()
    },
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableData();
    },

    handleSelectionChange(val){
      var arr = [];
       val.forEach((val) => {
        this.fieldextends.datas.forEach((v) => {
          if(val.fid == v.fid){
            let data=val.name+"-"+val.fid+"-"+val.forTable
            arr.push(data);
            
          }
        })
      })   
      this.multipleSelection = arr;
    },
    handleReserve(row){
      return row.fid
    },
    onCreateBtnClick() {
      this.dialogTitle = this.$t('field_new');
      this.detailVisible = true;
      this.mode="new"
      this.content = {"forTable":"tableUser","enabel":false,"sortNumber":"0"};
    },
    onExit(){
      this.mode="detail";
      this.searchTableData();
    },
    onRowClick(row) {
      this.dialogTitle = this.$t('field_edit');
      this.content = row;
      this.mode="detail";
      this.detailVisible = true;
    },
    searchTableData(){
      this.$api.getFieldExtends(
        this.searchdata,
        {
          onSucess: resp => {
            this.fieldextends = resp.data.data;
            this.$nextTick(() => {
            this.$refs.multipleTable.doLayout()
          })
          }
        }
      );
    },
    resetTableData(){
      this.searchdata={
        currpage:1,
        pagelines:10,
        data:{
          type:"",
          belong: "system",
          fortable:"",
          domainid: "",
        }
      };
      this.searchTableData();
    },
   async onDeleteBtnClick(){
      if(this.multipleSelection.length>0){
        await delMsg(this.$t('msg_confirm_delete'), this.$t('msg_tip'),this.$t('msg_confirm'),this.$t('cancel'))
        this.$api.deleteFieldExtend('',{
          data:this.multipleSelection
        },{
          onSucess:resp =>{
            if(resp.data.errcode==0){
              this.$message({
                showClose: true,
                message: this.$t('msg_del_success'),
                type: "success"
              });
              
              this.searchTableData()
            }else{
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
          },
          onError:function(){

          }
        })
      }else{
        this.$message({
          showClose: true,
          message: this.$t('one_data_selected'),
          type: "error"
        });
      }
    },
  }
};
</script>

<style>
</style>